<template>
  <view class="box">
    
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
	<view class="tou top " :style="'padding-top:' + statusBarHeight1 + 'px;position:fixed;top:0;left:0;width:100%'">
	  <image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />销售信息
	</view>  
    <view class="lou">
      <swiper class="swiper list" :indicator-dots="false" :autoplay="false" :circular="true" previous-margin="76rpx"
        next-margin="44rpx" @change="swiperchange">
        <swiper-item v-for="(item,index) in list" :key="index">
          <view class="swiper-item uni-bg-red">
            <view class="li">
              <view class="hao">{{item.building_num}}号楼</view>
              <p>
                <span style="color:#999">开盘：</span>
                <span>{{item.opening_time}}</span> 
              </p>
              <p>
                <span style="color:#999">交房：</span>
                <span>{{item.delivery_time}}</span>
              </p>
              <p>
                <span style="color:#999">单元：</span>
                <span>{{item.unit_number}}个</span>
              </p>
              <p>
                <span style="color:#999">层数：</span>
                <span>{{item.layer_number}}层</span>
              </p>
              <p>
                <span style="color:#999">户数：</span>
                <span>{{item.houses_number}}户</span>
              </p>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="huxing">
      <p class="name">关联户型</p>
      <view class="list">
        <view class="li" v-for="(item,index) in huList" :key="index" @click="hxdetails(item)">
			<image @click.stop="ViewImage(item.image)" :src="item.image" mode=""></image>
          <!-- <image :src=item.image /> -->
          <view class="wenzi">
            <p class="p1">{{item.title}}</p>
            <!-- <p class="p1">1314</p> -->
            <p class="p2">建筑面积：{{item.floorage}}㎡</p>
            <p class="p2">户型类别：{{item.house_type}}</p>
            <p class="p1 p3">约{{item.price}}万元</p>
          </view>
        </view>
      </view>
    </view>
	<uniBall></uniBall>
  </view>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  let statusBarHeight;
  //#ifdef H5
  import wxshare from "../../utils/index.js";
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = 106;
  //  #endif
  export default {
    data() {
      return {
        statusBarHeight,
        scrollLeft: 0,
        swiperList: [],
        id: "",
        scrollTop: "",
        userInfo: uni.getStorageSync("Pduser"),
        list: [],
        huList: [],
        typeLiat: []
      };
    },
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"])
    },
    async onLoad(options) {
      this.id = options.id;
    },
    mounted() {
      this.width = 5 * 624 + 24 + "rpx";
      this.getType();
    },
    methods: {
		hxdetails(item){
			uni.navigateTo({
				url: "/pages_houses/houses/houseType?id="+item.id
			});
		},
		ViewImage(url) {
			let arr=[]
			arr.push(url)
			uni.previewImage({
				current:url,
				urls: arr,
			});
		},
      swiperchange(e) {
        let index = e.detail.current;
        let type = this.list[index].house_type;
        this.huxin(type);
      },
      getFy() {
        let that = this;
        this.$myRequest
          .get("/mob/user/getBuildingsNumber", {
            id: this.id
          })
          .then(res => {
            this.list = res.list;
            this.huxin(this.list[0].house_type);
          });
      },
      huxin(id) {
        let that = this;
        this.$myRequest
          .get("/mob/user/getBuildingsNumberHouseType", {
            id: id
          })
          .then(res => {
            res.list.forEach(e => {
              that.typeLiat.forEach(k => {
                if (e.TYPE == k.valueNum) {
                  e.TYPE = k.valueName;
                }
              });
              e.image = e.image.split("|")[0]
            });
            that.huList = res.list;
          });
      },
      getType() {
        let that = this;
        this.$myRequest
          .get("/mob/home/getDictionaries", {
            pageNo: 1,
            pageSize: 10,
            type: "16"
          })
          .then(res => {
            that.typeLiat = res.list;
            this.getFy();
          });
      },
      fanhui() {
        uni.navigateBack({
          delta: 1
        });
      },
      shijian(num) {
        var data = num.split(" ")[0].split("-");
        return data[0] + "年" + data[1] + "月" + data[2] + "日";
      }
    }
  };
</script>

<style lang="less" scoped>
  .lou {
    overflow-x: auto;
    width: 100%;
    margin-top: 32rpx;

    .list {

      // margin-left: 24rpx;
      .li {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        padding-top: 80rpx;
        padding-left: 20rpx;
        width: 600rpx;
        height: 250rpx;
        border: 2rpx solid #e5e5e5;
        border-radius: 10rpx;
        margin-right: 24rpx;

        .hao {
          position: absolute;
          top: -2rpx;
          left: -2rpx;
          width: 166rpx;
          height: 68rpx;
          line-height: 68rpx;
          text-align: center;
          border-radius: 10rpx 0 10rpx 0;
          background-color: #64b6a8;
          color: #fff;
          font-size: 30rpx;
        }

        p {
          display: inline-block;
          width: 280rpx;
          margin-bottom: 10rpx;
          font-size: 24rpx;
        }
      }
    }
  }

  .huxing {
    margin-left: 36rpx;

    .name {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      margin-top: 40rpx;
      margin-bottom: 24rpx;
    }

    .list {
      image {
        width: 300rpx;
        height: 200rpx;
      }

      .wenzi {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;
        height: 200rpx;
        margin-bottom: 28rpx;
        width: 45%;

        .p1 {
          font-size: 34rpx;
          color: #333;
          font-weight: 600;
          margin-bottom: 10rpx;
        }

        .p2 {
          font-size: 26rpx;
          color: #666;
          font-weight: 400;
          margin-bottom: 10rpx;
        }

        .p3 {
          position: absolute;
          bottom: 0;
          left: 0;
          margin-bottom: 0rpx;
        }
      }
    }
  }

  .box {
    position: absolute;
    width: 100%;
    // padding-bottom: 100rpx;
    top: 0;
    bottom: 0;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 104rpx;
      right: 30rpx;
    }
  }
</style>